<template>
	<div>
		<div class="sales-board-form">
			<div class="sales-board-line">
				<div class="sales-board-line-left">
					购买数量
				</div>
				
			</div>
			<div class="sales-board-line">
				<div class="sales-board-line-left">
					购买数量
				</div>
				<div class="sales-board-line-right">
					<Counter :max="Counter.max" :min="Counter.min" @counter="getGoodInfo('counter',$event)"></Counter>
					<!-- <DownMenu :DownData="DownMenu"></DownMenu> -->
					
				</div>
			</div>
			<div class="sales-board-line">
				<div class="sales-board-line-left">
					购买数量
				</div>
				<div class="sales-board-line-right">
					<!-- <Counter :max="Counter.max" :min="Counter.min"></Counter> -->
					<!-- <DownMenu :DownData="DownMenu"></DownMenu> -->
					<Radios :Radios="Radios" @radios="getGoodInfo('radios',$event)"></Radios>
				</div>
			</div>
			<div class="sales-board-line">
				<div class="sales-board-line-left">
					购买数量
				</div>
				<div class="sales-board-line-right">
					<!-- <Counter :max="Counter.max" :min="Counter.min"></Counter> -->
					<DownMenu :DownData="DownMenu" @downmenu="getGoodInfo('downmenu',$event)"></DownMenu>
					
				</div>
			</div>
			<!-- 总价 -->
			<div class="sales-board-line">
				<div class="sales-board-line-left">
					<!-- {{totalprice}}元 -->
					{{getOrder}}--------------------{{getTotalPrice}}
				</div>
				<div class="sales-board-line-right">
					0元
				</div>
			</div>
			<!-- 立即购买 -->
			<div class="sales-board-line">
				<div class="sales-board-line-left">
	
				</div>
				<div class="sales-board-line-right">
					<a class="button">立即购买</a> &nbsp;&nbsp;
					<a class="button">加入购物车</a>
				</div>
			</div>
		</div>
		
		<div class="sales-board-des"></div>
	</div>
</template>

<script>
	import Counter from './components/Counter'
	import DownMenu from './components/DownMenu'
	import Radios from './components/Radios'
	export default{
		computed:{
			getTotalPrice(){
			 this.counter*5+this.downmenu*2+this.radios*10;
			return this.$store.getters.getTotalPrice;	
			},
			getOrder(){
				return this.$store.getters.getOrder;	
			}
		}
		methods:{
			/* getCounterNum(data){
				console.log(data);
			},
			getDownMenu(data){
				console.log(data)
			},
			getRadios(key,value){
				console.log(data)
			}, */
			getGoodInfo(data){
				this[key]=value;
				var readyData={
					'counter':this.counter;
					'downmenu':this.downMenu,
					'radios':this.radios
				}
			/* console.log(readyData)	; */
			this.totalprice=readyData.counter*5+readyData.downmenu*2+readyData.radios*10;
			}
		},
		name:'car',
		data(){
			return{
				totalprice:0;
				
				counter:1,
				downmenu:1,
				radios:1,
				Counter:{
					max:10,
					min:1
				},
				DownMenu:[
					{name:'初级班',value:1},
					{name:'中级班',value:2},
					{name:'高级班',value:3}
				],
				Radios:[
					{title:'1个月',value:1},
					{title:'3个月',value:2},
					{title:'6个月',value:3},
					{title:'年费',value:4}
				],
				
			}
		},
		components:{
			Counter,DownMenu,Radios
		}
	}
</script>

<style scoped> .buy-dialog-title {
font-size: 16px;
font-weight: bold; }.buy-dialog-btn { margin-top: 20px; }.buy-dialog-table { width: 100%; margin-bottom: 20px; }.buy-dialog-table td, .buy-dialog-table th { border: 1px solid #e3e3e3; text-align: center; padding: 5px 0; }.buy-dialog-table th { background: #4fc08d; color: #fff; border: 1px solid #4fc08d; }.button {
background: #4fc08d; color: #fff; display: inline-block; padding: 10px 20px; cursor: pointer; } </style>